<!--
 * @Description: v3路由
 * @Author: zzj
 * @Date: 2021-10-14 09:31:10
 * @LastEditors: zzj
 * @LastEditTime: 2021-10-14 10:37:36
-->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>v3路由</title>
	<script src="https://unpkg.com/vue@next"></script>
	<script src="https://unpkg.com/vue-router@4"></script>

</head>
<body>
	<div id="app">
		<div>
			<router-link to="/article">文章</router-link>
			<router-link to="/category">栏目</router-link>
			<router-link to="/comment">评论</router-link>
		</div>
		<hr>
			<!-- 渲染容器 -->
		<router-view></router-view>
	</div>

	<script>
		let Article = {
			template:`
				<div>文章页面</div>
			`
		}
		let Category = {
			template: `
			<div>栏目</div>
		`
		}
		let Comment = {
			template: `
		<div>评论</div>
	`
		}
		let router = VueRouter.createRouter({
			// 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
			history: VueRouter.createWebHashHistory(),
			routes:[
				{
					path:"/article",
					component:Article
				},
				{
					path: "/category",
					component: Category
				},
				{
					path: "/comment",
					component: Comment
				},
			]
		})

		let app = Vue.createApp({
			data(){
				return {
					msg: "路由"
				}	
			}
		})
		app.use(router);
		app.mount("#app");
	</script>
</body>
</html>